<template>
	<view class="order-manage">
		<view class="top-bar">
			<view class="detail">
				<view style="font-size: 45rpx;padding: 15rpx;padding-top: 50rpx;" v-model="maintenance">
					维修信息
				</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;">
				</view>
				<view>
					<view style="padding-bottom: 20rpx;padding-top: 40rpx;">
						维修单号：{{maintenance.orderNo}}
					</view>
					<view style="padding-bottom: 20rpx;">
						车主姓名：{{maintenance.name}}
					</view>
					<view style="padding-bottom: 20rpx;display: inline-flex;gap:250rpx">
						<view>联系方式：{{maintenance.phone}}</view>
						<view>
<!-- 							<image src="../../img/车联网服务商家端-08评价管理-已完成订单_slices/plane.png"
								style="width: 20rpx;height: 20rpx;" mode="widthFix"></image> -->
						</view>
					</view>
					<view style="padding-bottom: 20rpx;">
						求助描述：{{maintenance.description}}
					</view>
					<view style="padding-bottom: 20rpx;display: inline-flex;gap:265rpx">
						<view>取车位置：{{maintenance.position}}</view>
						<view>
<!-- 							<image src="../../img/车联网服务商家端-08评价管理-已完成订单_slices/plane.png"
								style="width: 20rpx;height: 20rpx;" mode="widthFix"></image> -->
						</view>
					</view>
					<view style="padding-bottom: 20rpx;">
						预约日期：{{maintenance.applyTime}}
					</view>
					<view style="padding-bottom: 20rpx;" v-if="maintenance.oktime!=null&&maintenance.oktime!=''">
						提交日期：{{maintenance.oktime}}
					</view>
				</view>

			</view>
			<view class="cardetail">
				<view style="font-size: 45rpx;padding: 15rpx;padding-top: 50rpx;">车辆信息</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;">
				</view>
				<view style="padding-bottom: 15rpx;padding-top: 30rpx;">车辆类型：{{carinfo.type}}</view>
				<view style="padding-bottom: 15rpx;padding-top: 30rpx;">车牌号：{{carinfo.carNum}}</view>
				<view>
					<view style="padding-bottom: 15rpx;padding-top: 30rpx;">整车图片</view>
					<view><image :src="carinfo.avater" style="width: 200rpx;height: 200rpx;" mode="widthFix"></image></view>
				</view>
				<view>
				  <view style="padding-bottom: 15rpx;padding-top: 30rpx;">维修部分图片</view>
				  <!-- 外层容器：设置flex布局，允许换行 -->
				  <view style="display: flex; gap: 30rpx; overflow-x: auto; padding: 10rpx 0;">
				    <!-- 循环渲染图片，每个图片单独占一项 -->
				    <view v-for="(item, index) in weixiuimgs" :key="index" style="flex-shrink: 0;">
				      <image :src="item.img" style="width: 300rpx; height: 300rpx; object-fit: cover;"  mode="widthFix"
				      ></image>
				    </view>
				  </view>
				</view>
			</view>
			<view>
				<button class="detail-btn" @click="hexiao(item)" v-if="maintenance.status==0">确认到场</button>
				<button class="detail-btn1" v-if="maintenance.status==1">已到场</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		put
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				hexiaoshow: false,
				isdaochang: false,
				maintenance:{
					maintenancenumber:"3535252",
					name:"张",
					tel:"1993859282",
					maintenanceway:"上门取车/到店维修",
					caraddress:"山阳区32号",
					appointmengttime:"2022/11/10 11：00",
					submittime:"2022/11/10 11：00",
					cartype:"大客车",
					carnumber:"豫J45323"
				},
				carinfo:'',
				weixiuimgs:[]
			};
		},
		methods: {
			async hexiao() {
				this.maintenance.status=1
				const today = new Date();
				this.maintenance.oktime= today
				const res=await put('/dev-api/system/rescue',this.maintenance)
				console.log(res)
			}
		},
		async onLoad(option) {
			this.maintenance = option.OrderData ? JSON.parse(option.OrderData) : {};
			console.log(this.maintenance)
			this.carinfo=(await get('/dev-api/system/info/'+this.maintenance.carid,{})).data
			const res=await get('/dev-api/system/img/list/rescueId/'+this.maintenance.id,{})
			this.weixiuimgs=res
			console.log(res)
			console.log(this.carinfo)
		}
	}
</script>

<style scoped>
	.order-manage {
		background-color: #f5f5f5;
		min-height: 100vh;
		/*  padding: 10px; */
	}

	/* 顶部搜索及筛选 */
	.top-bar {
		padding: 10px;
		background-color: #2979ff;
		height: 200rpx;
	}

	.detail {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		background-color: white;
		height: 600rpx;
		border-radius: 4%;
		margin-bottom: 30rpx;
	}
	.cardetail {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		background-color: white;
		height: 1000rpx;
		border-radius: 4%;
	}
	.detail-btn {
	  background-color: #007aff;
	  color: #fff;
	  font-size: 14px;
	  padding: 5px 10px;
	  border-radius: 4px;
	  width: 500rpx;
	  height: 100rpx;
	  display: flex;
	  justify-content: space-between;
	  text-align: center;
	  justify-content: center; /* 水平居中 */
	  padding-bottom: 30rpx;
	  border-radius: 25rpx;
	  margin-top: 30rpx;
	}
	.detail-btn1{
		background-color: gray;
		color: #fff;
		font-size: 14px;
		padding: 5px 10px;
		border-radius: 4px;
		width: 500rpx;
		height: 100rpx;
		display: flex;
		text-align: center;
		justify-content: center; /* 水平居中 */
		border-radius: 25rpx;
		margin-top: 30rpx;
	}
</style>